<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <style>
      table {
        width: 600px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
      }

      td {
        width: 100px;
        border: 1px solid #333;
        height: 50px;
        line-height: 50px;
        background-color: skyblue;
      }
      th {
        width: 100px;
        border: 1px solid #333;
        height: 30px;
        line-height: 30px;
        background-color: rgb(0, 255, 76);
      }

      thead tr {
        height: 80px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <table cellspacing="0">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>Phone</th>
          <th>Hobby</th>
          <th>Describe</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      var fun = function () {
        $.get("tab.php", function (res) {
          var data = JSON.parse(res);

          var tbody = document.querySelector("tbody");

          // 2. 动态生成 tr (行)
          for (var i = 0; i < data.length; i++) {
            var tr = document.createElement("tr");
            // 每一行放一个对象，每一列，都属对象的属性值。
            // 遍历对象，将属性的值，放入 td
            for (k in data[i]) {
              // console.log(k, data[i][k]);
              // 生成 td 列
              var td = document.createElement("td");
              // 将对象的属性值放入 td
              td.innerHTML = data[i][k];
              // td 放入 tr
              tr.appendChild(td);
            }
            tbody.appendChild(tr);
          }
        });
      };
      fun();
    </script>
  </body>
</html>
